 <?php 
include("fechas");
?>
<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src='js/jquery.path.js'></script>
<script type="text/javascript" src='js/jscroller-0.4.js'></script>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />  
<meta charset=utf-8 />
<title>Z BUS</title>

<script type="text/javascript">
var x;
x=$(document);
x.ready(iniciar);
x.ready(logo);

function iniciar(){
var x;
paraderoFalse();
rutasFalse();
x=$(".rutauno");
x.click(rutaUno);
x=$(".rutados");
x.click(rutaDos);
x=$(".rutatres");
x.click(rutaTres);
x=$(".rutacuatro");
x.click(rutaCuatro);
x=$(".rutacinco");
x.click(rutaCinco);
x=$(".rutafinal");
x.click(reporteFinal);
}
function paraderoUno(){
var x;

x=$("#paraderouno").css("background-color","yellow");
x.show();
x=$(".rutauno");
x.hide();
x=$(".rutados");
x.show();
}
function paraderoDos(){
var x;
x=$("#paraderodos").css("background-color","green");
x.show();
x=$(".rutados");
x.hide();
x=$(".rutatres");
x.show();
}
function paraderoTres(){
var x;
x=$("#paraderotres").css("background-color","orange");
x.show();
x=$(".rutatres");
x.hide();
x=$(".rutacuatro");
x.show();
}
function paraderoCuatro(){
var x;
x=$("#paraderocuatro").css("background-color","pink");
x.show();
x=$(".rutacuatro");
x.hide();
x=$(".rutacinco");
x.show();
}
function paraderoCinco(){
var x;
x=$("#paraderocinco").css("background-color","black");
x.show();
}
function paraderoFinal(){
paraderoFalse();
}
function reporteFinal(){
var x;
x=$("#reportefinal").css("background-color","white");
x.show("slow");
}
function paraderoFalse(){
var x;
x=$("#paraderouno");
x.hide();
x=$("#paraderodos");
x.hide();
x=$("#paraderotres");
x.hide();
x=$("#paraderocuatro");
x.hide();
x=$("#paraderocinco");
x.hide();
}
function rutasFalse(){
var x;
x=$(".rutados");
x.hide();
x=$(".rutatres");
x.hide();
x=$(".rutacuatro");
x.hide();
x=$(".rutacinco");
x.hide();
x=$("#reportefinal");
x.hide();
}
function rutaUno()
{
var x;
x=$(".rutainicio");
x.show();
  var path = {
   start: {x: 40,y: 550,angle: 315.012,length: 0.707},
     end: {x: 400,y: 400,angle: 315.012,length: 0.707}
          };
  $('.rutauno').animate(
      {
        path : new $.path.bezier(path)
      },
      2000,
      paraderoUno)
}
function rutaDos()
{
  var path = {
   start: {x: 400,y: 400,angle: 315.012,length: 0.707},
     end: {x: 300,y: 300,angle: 315.012,length: 0.707}
          };
  $('.rutados').animate(
      {
        path : new $.path.bezier(path)
      },
      2000,
      paraderoDos)
}
function rutaTres()
{
  var path = {
   start: {x: 300,y: 300,angle: 315.012,length: 0.707},
     end: {x: 500,y: 200,angle: 315.012,length: 0.707}
          };
  $('.rutatres').animate(
      {
        path : new $.path.bezier(path)
      },
      2000,
      paraderoTres)
}
function rutaCuatro()
{
  var path = {
   start: {x: 500,y: 200,angle: 315.012,length: 0.707},
     end: {x: 800,y: 80,angle: 315.012,length: 0.707}
          };
  $('.rutacuatro').animate(
      {
        path : new $.path.bezier(path)
      },
      2000,
      paraderoCuatro)
}
function rutaCinco()
{
  var path = {
   start: {x: 800,y: 80,angle: 0,length: 0.707},
     end: {x: 1200,y: 80,angle: 0,length: 0.707}
          };
  $('.rutacinco').animate(
      {
        path : new $.path.bezier(path)
      },
      2000,
      paraderoFinal)
}

/*function time(){
$('#titulo').animate({marginLeft: '0px'},{ queue:false, duration:5000} );
var t=setTimeout('time1()',6000);
}
function time1(){
$('#titulo').animate({marginLeft: '-300px'},{ queue:false, duration:5000} );
var x=setTimeout('timeMsg()',6000);
}*/
</script>
</head>
<body>

<!--<marquee behavior="titulo" scrollamount="4" direction="left" width="800">-->
  <h2 align="center" id="titulo">RUTAS TURISMO HUARAL HUACHO - LIMA</h2>
<!-- paraderos-->
	<div id="paraderouno">
	<label>Chancay</label>
	<!--<label>Personal</label></br>
	<label>Bus</label></br>
	<label>Date</label>-->
	</div>
	<div id="paraderodos"></div>
	<div id="paraderotres"></div>
	<div id="paraderocuatro"></div>
	<div id="paraderocinco"></div>
	<!-- reporte-->
	<div id="reportefinal">			
	<table id="tabla">
	<tr id="cabecera">
	<td colspan="5">Reporte de Viaje</td>
	</tr>
	  <tr id="cabecera1">
		<td id="cabecera2">Personal</td>
		<td id="cabecera2">Bus</td>
		<td id="cabecera2">Date</td>
		<td id="cabecera2">Time</td>
		<td id="cabecera2">Descripcion</td>
	  </tr>
	  <?php 
	  
	  for($i=0;$i<=12;$i++){?>
	  <tr id="cuerpo">
		<td>juan carlos<?php echo " ".$i?> </td>
		<td>XDC-252<?php echo " ".$i?>0</td>
		<td><?php echo date("d-m-Y");?></td>
		<td><?php echo date("H:i:s");?></td>
		<td>Se recogio <?php echo " ".$i?> pasajeros en el viaje</td>
	  </tr>
	  <?php  }?>
	  
	</table>
	</div>
<!-- rutas-->	
  <div class="rutainicio">&nbsp;&nbsp;&nbsp&nbsp;&nbsp Z</br>&nbsp;&nbsp BUS</div>
  <div class="rutauno">&nbsp;&nbsp;&nbsp&nbsp;&nbsp Z</br>&nbsp;&nbsp BUS</div>
  <div class="rutados">&nbsp;&nbsp;&nbsp&nbsp;&nbsp Z</br>&nbsp;&nbsp BUS</div>
  <div class="rutatres">&nbsp;&nbsp;&nbsp&nbsp;&nbsp Z</br>&nbsp;&nbsp BUS</div>
  <div class="rutacuatro">&nbsp;&nbsp;&nbsp&nbsp;&nbsp Z</br>&nbsp;&nbsp BUS</div>
  <div class="rutacinco">&nbsp;&nbsp;&nbsp&nbsp;&nbsp Z</br>&nbsp;&nbsp BUS</div>
  <div class="rutafinal">&nbsp;&nbsp;&nbsp&nbsp;&nbsp Z</br>&nbsp;&nbsp BUS</div>
<!-- etiquetas de ruta inicio y fin-->
<div id="huacho">
<label>Huacho</label></br>
</div>
<div id="lima">
<label>Lima</label></br>
</div>

</body>
</html>